<!--
 * @Description: errorList- 错题集
 * @Author: your name
 * @Date: 2024-01-29
 * @LastEditTime: 2024-01-29
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="errorList heart_w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/studyPlan' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{ path: '/exam_practice/FRM/frmQuestionbank' }"
        >
          题库
        </el-breadcrumb-item>
        <el-breadcrumb-item>错题详情集</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="error_list">
        <div class="recordlist">
          <div
            class="itembox"
            v-if="
              topicObj.type == 1 || topicObj.type == 2 || topicObj.type == 3
            "
          >
            <div class="index_type">
              <span>
                {{ topicList.length - nowposition + 1 }}.[
                {{
                  topicObj.type == 1
                    ? '单项选择题'
                    : topicObj.type == 2
                    ? '多选题'
                    : topicObj.type == 3
                    ? '判断题'
                    : topicObj.type == 4
                    ? '填空题'
                    : '测试题'
                }}]
              </span>
            </div>
            <div class="index_commonTiMu" style="padding-left: 30px">
              <p v-html="topicObj.title"></p>
            </div>

            <!-- 题目内容 -->
            <div class="index_questionList">
              <div class="index_questionTitle">
                <div class="titnum">1</div>
                <div class="icons">
                  <div class="jiucuo" @click="correct_err_show = true">
                    纠错
                  </div>
                  <div class="questionask" @click="wd_show = true">提问</div>
                  <div
                    class="questioncollect"
                    @click="errorCollection(topicObj)"
                    :class="{ active: is_collection }"
                  >
                    {{ is_collection ? '取消收藏' : '收藏' }}
                  </div>
                  <div class="questiondelete" @click="removeError">
                    移除错题
                  </div>
                </div>
              </div>
              <div class="index_questionCon">
                <div class="options">
                  <div
                    v-for="(option, index) in topicObj.op"
                    :key="index"
                    :class="{
                      optionBox: true,
                      active: option.is_xuan && index + 1
                    }"
                    @click="chose_answer(option, topicObj, index)"
                  >
                    <div class="option">
                      {{ option.value }}
                    </div>
                    <div class="optionText">{{ option.title }}</div>
                  </div>
                </div>
                <div class="analysisBox">
                  <el-button
                    plain
                    size="small"
                    round
                    @click="toprev(topicObj.id)"
                  >
                    上一题
                  </el-button>
                  <el-button
                    plain
                    size="small"
                    round
                    @click="tonext(topicObj.id, topicObj)"
                  >
                    下一题
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <div class="right_error">
            <div class="top">
              <div class="timePause">
                <p class="time">
                  用时：<span> {{ timing }} </span>
                </p>
                <button @click="stop">暂停</button>
              </div>
            </div>
            <el-button type="primary" @click="jiaojuanTopic">交卷</el-button>
          </div>

          <!-- 答题卡 -->
          <div class="answer_sheet right_error">
            <div class="tit">答题卡</div>
            <div class="listBox">
              <div class="testSitu">
                <p>已答</p>
                <p>未答</p>
              </div>
              <div class="list" style="padding-top: 10px">
                <span
                  @click="cardto(item, index)"
                  :class="{ nodo: item.is_do !== 1 }"
                  v-for="(item, index) in topicList"
                  :key="index"
                >
                  {{ index + 1 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 答疑 -->
      <transition name="leftToright">
        <div class="common_dialog ans_que" v-if="wd_show">
          <div class="inner_con">
            <div class="title">
              问答
              <div class="close" @click="close_wd"></div>
            </div>
            <div class="row">
              <button
                class="my_ans"
                style="background: linear-gradient(-90deg, #fa4e4e, #fd894f)"
              >
                我的提问
              </button>
            </div>
            <div class="que_info">
              <textarea placeholder="请输入您要提问的内容" v-model="wd_info">
              </textarea>
            </div>
            <div class="upd_box">
              <el-upload
                action="https://rongyue.rongyuejiaoyu.com/api/v1.common/upload"
                list-type="picture-card"
                :on-preview="imgPreview"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess"
                :limit="3"
                :on-exceed="handleExceed"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="btm_btns">
              <button @click="close_wd">取消</button>
              <button @click="submit_wd(wd_info)">保存</button>
            </div>
          </div>
        </div>
      </transition>

      <!-- 纠错 -->
      <transition name="leftToright">
        <div class="common_dialog jc_dialog" v-if="correct_err_show">
          <div class="inner_con">
            <div class="title">
              纠错
              <div class="close" @click="close_err"></div>
            </div>
            <div class="body">
              <p class="t_title">
                CFALevel II“甄”题库Economics(2024N) LM1 Currency Exchange Rates:
                Understanding Equilibrium Value
              </p>
              <div class="choose_box">
                <el-radio-group v-model="error_form.err_choose">
                  <el-radio
                    size="medium"
                    v-for="(item, i) in correctionList"
                    :key="item"
                    :label="i"
                  >
                    {{ item }}
                  </el-radio>
                </el-radio-group>
              </div>
              <textarea
                placeholder="感谢您的意见和体验感受，我们一定会快速解决您的..."
                class="jc_input"
                v-model="error_form.correct_info"
              >
              </textarea>
            </div>
            <div class="btm_btn">
              <button class="cancel" @click="close_err">取消</button>
              <button class="sure" @click="submit_err(topicObj.id)">
                确定
              </button>
            </div>
          </div>
        </div>
      </transition>

      <!-- 暂停做题 -->
      <transition name="leftToright">
        <div class="mask-pause" v-show="pauseShow">
          <div class="kuang">
            <img
              src="https://www.rongyuejiaoyu.com/newzhike/img/icon-save.png"
              alt=""
            />
            <p>休息一下，马上回来！</p>
            <div class="stopBtn" @click="pauseHide">继续做题</div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { addTopicError, getTopicErrorType } from '@/api/FRM.js'
import { getTopicInfoByError, getTopicListByError } from '@/api/proErrorClass'
export default {
  name: 'errorList',
  data() {
    return {
      errorList: [],
      topicObj: {},
      topicList: [], // 答题卡
      answerList: [],
      nowposition: 0, //当前题的题号
      log_id: '',
      timing: '00:00:00',
      seconds: 0, // 计时时间
      testTime: 0,
      pauseShow: false,
      wd_show: false, // 提问
      filelist: [], // 文件上传列表
      correct_err_show: false, // 纠错
      wd_info: '', // 问答内容
      is_collection: false,
      correctionList: [], // 纠错类型
      error_form: {
        err_choose: 0, // 纠错/复选框
        correct_info: '', // 纠错/文本域
        your_phone: '' // 纠错/ 手机号
      }
    }
  },
  created() {
    this.start()
    this.ErrorCorrection()
    this.getByError()
  },
  methods: {
    getByError() {
      getTopicListByError({ cid: 8 }).then(({ data: data }) => {
        this.nowposition = data.data.list[0].id
        this.topicList = data.data.list
        this.log_id = data.data.log_id
        this.getInfoTopic(data.data.list[0].id, data.data.log_id)
      })
    },
    async getInfoTopic(tid, log_id) {
      // TODO:
      let params = {
        log_id: log_id,
        cid: 1, // 二级ID
        tid: tid - 1 // 题ID :案例 1 单选 2多选 3判断 4 填空 5问答 6 case
      }
      const { data: data } = await getTopicInfoByError(params)

      this.$set(data.data, 'user_answer_index', -1)
      let arr = data.data.op.filter((ele, index) => {
        return ele.is_xuan == true
      })
      if (data.data.collection) {
        data.data.collection = data.data.collection
      } else {
        data.data.collection = false
      }
      if (data.data.is_value) {
        data.data.is_value = data.data.is_value
      } else {
        data.data.is_value = arr.length <= 0 ? '' : arr[0].value
      }
      this.topicObj = data.data
    },
    async ErrorCorrection() {
      const { data: data } = await getTopicErrorType()
      this.correctionList = data.data
    },
    async submit_err(id) {
      console.log(this.error_form)
      if (this.error_form.correct_info !== '') {
        let jiucuo = {
          tid: id,
          type: this.error_form.err_choose,
          content: this.error_form.correct_info
        }
        const { data: data } = await addTopicError(jiucuo)
        if (data.code == 1) {
          layer.msg(data.msg)
        } else {
          layer.msg('纠错失败！')
        }
      } else {
        layer.msg('请填写内容')
      }
    },
    errorCollection(item) {
      this.is_collection = !this.is_collection
    },
    chose_answer(option, item, index) {
      let _this = this
      if (item.type == '1' || item.type == '3') {
        // 单选题
        item.op = item.op.map((item) => ({
          ...item,
          is_xuan: item.value == option.value
        }))
        this.frmOpList = item.op
      } else if (item.type == '2') {
        // 多选
        option.is_xuan = !option.is_xuan
      } else if (item.type == '4') {
        // 填空题
        console.log(123, item.user_answer)
        _this.answerList.push(item.user_answer)
      }

      //  选中选项
      let is_anserw = item.op.filter((ele, i) => {
        return ele.is_xuan == true
      })
      _this.answerList = is_anserw
      console.log(is_anserw, '选中答案项', _this.answerList)
    },
    // 上一题
    toprev(position) {
      this.nowposition++
      if (this.nowposition > this.topicList.length) {
        this.nowposition = this.topicList.length
        this.$message.warning({
          message: '没有上一题了',
          type: 'warning',
          iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
          customClass: 'el-message--warning'
          // offset: 80
        })
        return false
      }
      this.getInfoTopic(this.nowposition, this.log_id)
    },
    // 下一题
    tonext(position, item) {
      let anserArr = []
      this.answerList.map((ele, index) => {
        if (ele.is_xuan == true) {
          anserArr.push(ele.value)
        }
      })
      let answer = item.type == '4' ? item.user_answer : anserArr.join(',')
      this.answerValue = answer

      this.nowposition--
      let position_num = this.topicList.length - position

      if (this.nowposition < 1) {
        this.nowposition = 1
        this.$message.warning({
          message: '没有下一题了',
          type: 'warning',
          iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
          customClass: 'el-message--warning'
          // offset: 80
        })
        // this.ProblemSolving(answer, position_num)
        return false
      }
      this.getInfoTopic(this.nowposition, this.log_id)
      // 提交做题记录
      // this.ProblemSolving(answer, position_num)
      // 题目更换，把上一题目置【】
      this.answerList = []
    },
    removeError() {
      // 移出错题
    },
    close_wd() {
      this.wd_info = ''
      this.filelist = []
      this.wd_show = false
    },
    close_err() {
      // 纠错
      this.correct_err_show = false
      this.error_form.correct_info = ''
      this.error_form.your_phone = ''
      this.error_form.err_choose = '0'
    },
    pauseHide() {
      this.pauseShow = false
      this.start()
    },
    // 暂停计时
    stop() {
      clearInterval(this.Init)
      this.pauseShow = true
      console.log(this.seconds)
    },
    start() {
      this.Init = setInterval(this.timers, 1000)
    },
    timers(num) {
      if (num) {
        this.seconds = this.testTime
      }
      this.seconds++
      var second = this.seconds % 60
      var minute = parseInt(this.seconds / 60) % 60
      var hour = parseInt(this.seconds / 3600)
      this.timing = `${hour < 10 ? '0' + hour : hour}:
      ${minute < 10 ? '0' + minute : minute}:
      ${second < 10 ? '0' + second : second}`
    },
    jiaojuanTopic() {
      this.$router.push({
        path: '/exam_practice/errorReport',
        query: {}
      })
    },
    imgPreview(file) {
      this.wd_preview_img = file.url
      this.wd_preview_show = true
    },
    handleAvatarSuccess(res, file) {
      this.fullImageUrl = res.data.fullurl
      console.log(res)
    },
    handleExceed() {
      this.$message.warning('最多上传三张图片！')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';

.errorList {
  margin-top: 40px;
  margin-bottom: 40px;
}

.error_list {
  display: flex;
  justify-content: space-between;

  .answer_sheet {
    .tit {
      font-size: $size-common;
      color: #272c31;
      font-weight: 550;
      padding-bottom: 16px;
      border-bottom: 1px solid #eee;
    }
    .listBox {
      margin-top: 19px;
      .testSitu {
        display: flex;
        span {
          font-size: 14px;
          color: #595959;
          letter-spacing: 1px;
          margin-right: 10px;
        }
        p {
          font-size: 12px;
          color: #595959;
          letter-spacing: 1px;
          text-indent: 22px;
          margin-right: 19px;
          position: relative;
          &::after {
            content: '';
            width: 16px;
            height: 16px;
            // background-color: #fcde84;
            background-color: #0193ff;
            border-radius: 3px;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
          }
          &:last-child {
            &::after {
              background: #fff;
              border: 1px solid #ccc;
            }
          }
          &.current {
            &::after {
              background: #00af63;
              border: 1px solid #00af63;
            }
          }
          &.error {
            &::after {
              background: #ff8a8d;
              border: 1px solid #ff8a8d;
            }
          }
          &.nodo {
            &::after {
              background: #fff;
              border: 1px solid #ccc;
            }
          }
        }
      }
      .navs {
        display: flex;
        margin: 23px 0;
        p {
          font-size: $size-common;
          color: $color-black;
          margin-right: 5px;
          &:last-child {
            margin-right: 0;
          }
          &.act {
            color: $color-green;
          }
        }
      }
      .list {
        max-height: 195px;
        overflow-y: auto;
        // padding-right: 10px;
        // 滚动条样式
        &::-webkit-scrollbar {
          width: 8px;
        }
        // 滚动槽
        &::-webkit-scrollbar-track {
          border-radius: 4px;
          background: #f2f2f2;
          margin-top: 8px;
        }
        // 滚动滑块
        &::-webkit-scrollbar-thumb {
          border-radius: 8px;
          background: #b4bbc5;
        }
        span {
          display: inline-block;
          width: 24px;
          height: 24px;
          // background-color: #fcde84;
          background-color: #0193ff;
          border-radius: 3px;
          margin: 0 15px 14px 0;
          font-size: 12px;
          color: $color-white;
          text-align: center;
          line-height: 24px;
          box-sizing: border-box;
          cursor: pointer;
          &:last-child {
            margin-right: 0;
          }
          &:nth-child(6n + 6) {
            margin-right: 0;
          }
          &.nodo {
            background: $color-white;
            border: solid 1px #cccccc;
            color: #595959;
            line-height: 22px;
          }

          &.current {
            background: #00af63;
            border: 1px solid #00af63;
          }
          &.error {
            background: #ff8a8d;
            border: 1px solid #ff8a8d;
          }
          &.nodo {
            background: #fff;
            border: 1px solid #ccc;
          }
        }
      }
    }
  }

  .right_error {
    width: 280px;
    background-color: #fff;
    // height: 153px;
    box-shadow: 0 0 8px 0 hsl(0deg 0% 91% / 55%);
    border-radius: 5px;
    margin: 20px 0 16px;
    padding: 23px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;

    .top {
      box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
      border-radius: 5px;
      padding: 25px;
      box-sizing: border-box;
      margin-bottom: 18px;
      .timePause {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time {
          font-size: 14px;
          color: #0193ff;
          text-indent: 28px;
          position: relative;
          &::after {
            content: '';
            width: 20px;
            height: 19px;
            background: url('@/assets/images/clock201.png') no-repeat center;
            background-size: cover;
            position: absolute;
            top: 2px;
            left: 0;
          }
          span {
            font-size: 16px;
            color: #0193ff;
          }
        }
        button {
          width: 70px;
          height: 28px;
          background-color: #0193ff;
          font-size: 16px;
          color: #fff;
          border: none;
          outline: none;
          cursor: pointer;
        }
      }
    }
  }
}

.recordlist {
  min-height: 500px;
  background: #fff;
  padding: 5px 20px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  flex: 1;
}

.index_type {
  font-size: 16px;
  color: #333;
  line-height: 16px;
  background: #fff;
  width: 100%;
  padding: 30px 0 20px;
  font-family: 'Microsoft Yahei';

  &::before {
    content: ' ';
    display: block;
    width: 4px;
    height: 16px;
    background: #47c88a;
    margin-right: 20px;
    float: left;
  }
}

.itembox {
  .index_questionList {
    padding: 10px 20px 20px;
    background: #fff;
  }

  .index_questionTitle {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .questiondelete {
      background: url('@/assets/images/error_cuot.png') no-repeat 0;
    }

    .titnum {
      width: 26px;
      height: 30px;
      line-height: 21px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      background: url('@/assets/images/titnum.png') no-repeat center center;
      background-size: contain;
    }

    .titnum + div {
      display: flex;

      div:first-child {
        background: url('@/assets/images/jiucuo.png') no-repeat 0;
      }

      div:nth-child(2) {
        background: url('@/assets/images/ti_wen.png') no-repeat 0;
      }

      .questioncollect {
        background: url('@/assets/images/cancel.png') no-repeat 0;
      }
      .questioncollect.active {
        background: url('@/assets/images/collect.png') no-repeat 0;
      }

      div {
        user-select: none;
        padding-left: 10px;
        margin-left: 15px;
        cursor: pointer;
        font-size: 14px;
        color: #666;
        line-height: 30px;
        text-indent: 10px;
      }
    }
  }
  .index_questionCon {
    .index__commonTiMu {
      padding: 15px 0 11px;
      clear: both;
      word-wrap: break-word;
      font-size: 16px;
      color: #333;
      line-height: 24px;

      p {
        font-size: 18px !important;
        font-weight: bold;
      }
    }

    .analysisBox {
      overflow: hidden;
      background: #fafafa;
      margin-top: 25px;
      padding: 15px 30px;
      width: 100%;
      font-size: 14px;
      color: #999;
      text-align: right;
      box-sizing: border-box;

      img {
        width: 18px;
        height: 18px;
        margin-right: 17px;
        vertical-align: middle;
      }

      span {
        margin-right: 15px;
        display: inline-block;
        vertical-align: middle;
        i {
          font-style: normal;
        }

        .error {
          color: #ff4e4e;
        }

        .correct {
          color: #47c88a;
        }
      }
    }

    .choseanalysis {
      p {
        font-size: 14px;
        color: #999;
        width: 80px;
        line-height: 22px;
        margin-top: 25px;
        clear: both;
      }
    }

    .optionBox:hover {
      background-color: #fafafa;
    }

    .optionBox {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 5px 0;
      padding-left: 5px;
      cursor: pointer;

      .option {
        width: 26px;
        height: 26px;
        background-color: #ededed;
        border-radius: 50%;
        font-size: 14px;
        color: #000033;
        text-align: center;
        line-height: 26px;
        margin-right: 16px;
      }

      .optionText {
        max-width: 550px;
        font-size: 14px;
        color: #000033;
      }
    }
    .active {
      .option {
        background: #fcde84;
        color: #fff;
      }
    }
  }
}
</style>
